class XMwiper {
  constructor(obj) {
    this.pageIndex = 0;
    this.el = document.querySelector(obj.sel);
    this.rightBtn = this.el.querySelector(".lunbo-button-right");
    this.leftBtn = this.el.querySelector(".lunbo-button-left");
    this.oLis = this.el.querySelectorAll(".lunbo li");
    this.pageLis = this.el.querySelectorAll(
      ".lunbo-botton-list  .lunbo-button-swiper"
    );

    // // 1-右按钮的点击事件
    this.nextR();

    // 2-左按钮的点击事件
    this.nextL();

    // // 3-自动轮播
    if (obj.autoPlay) {
      this.autoPlay();
    }

    // // 焦点点击
    this.pageLiEvents();

    this.showPageLiWithIndex();
  }

  // 右击轮播
  nextR() {
    // 1-右按钮的点击事件
    this.rightBtn.onclick = () => {
      this.oLis[this.pageIndex].style.opacity = "0";

      this.pageIndex++;
      if (this.pageIndex == 5) {
        this.pageIndex = 0;
      }
      this.oLis[this.pageIndex].style.opacity = "1";
      this.showPageLiWithIndex();
    };
  }

  // 左击轮播
  nextL() {
    // 1-左按钮的点击事件
    this.leftBtn.onclick = () => {
      this.oLis[this.pageIndex].style.opacity = "0";

      this.pageIndex--;
      if (this.pageIndex == -1) {
        this.pageIndex = 4;
      }
      this.oLis[this.pageIndex].style.opacity = "1";

      this.showPageLiWithIndex();
    };
  }

  // 自动轮播
  autoPlay() {
    let timer = setInterval(() => {
      this.oLis[this.pageIndex].style.opacity = "0";

      this.pageIndex++;
      if (this.pageIndex == 5) {
        this.pageIndex = 0;
      }
      this.oLis[this.pageIndex].style.opacity = "1";
      this.showPageLiWithIndex();
    }, 3000);

    this.el.onmouseenter = () => {
      clearInterval(timer);
    };
    this.el.onmouseleave = () => {
      timer = setInterval(() => {
        this.oLis[this.pageIndex].style.opacity = "0";

        this.pageIndex++;
        if (this.pageIndex == 5) {
          this.pageIndex = 0;
        }
        this.oLis[this.pageIndex].style.opacity = "1";
        this.showPageLiWithIndex();
      }, 3000);
    };
  }

  pageLiEvents() {
    // 焦点的点击
    this.pageLis.forEach((btn, i) => {
      btn.onclick = () => {
        this.oLis[this.pageIndex].style.opacity = "0";

        this.pageIndex = i;
        this.oLis[this.pageIndex].style.opacity = "1";

        this.showPageLiWithIndex();
      };
    });
  }

  showPageLiWithIndex() {
    this.pageLis.forEach((v) => v.classList.remove("button-hover"));
    this.pageLis[this.pageIndex].classList.add("button-hover");
  }
}
